<template>
    <el-dialog title="应用情况" :visible.sync="visible" width="976px" append-to-body>
        <BasePage style="border: 0; box-shadow: none">
            <el-form slot="form" :inline="true" size="medium" label-width="110px" @submit.native.prevent>
                <el-form-item label="决策项目名称">
                    <el-input v-model.trim="form.decisionItemName" clearable placeholder="请输入" />
                    <!-- <el-select v-model="form.decisionItemName" placeholder="请选择" clearable style="width: 100%">
                        <el-option v-for="d in options" :key="d.value" :label="d.label" :value="d.label" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="管养单位">
                    <CustodyOrgSelect :value.sync="form.orgName" :is-label="true" clearable></CustodyOrgSelect>
                </el-form-item>
                <el-form-item>
                    <BaseButton v-permission="{ btnCode: '' }" @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="resetConditions">重置</BaseButton>
                </el-form-item>
            </el-form>

            <!--数据列表区-->
            <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="500px" highlight-current-row>
                <template #index="{ scope: { $index } }">
                    <span>{{ $index + 1 + (page.pageNo - 1) * page.pageSize }}</span>
                </template>
                <template #roadName="{ scope: { row } }">
                    {{ row.highwayName }}<span v-if="row.highwayName&&row.roadSectionDetail">{{ '——' }}</span>{{ row.roadSectionDetail }}
                </template>
                <template #handle="{ scope: { row } }">
                    <BaseButton v-permission="{ btnCode: '' }" type="text" @click="handleEdit(row.id)">修改</BaseButton>
                </template>
            </BaseTable>
            <!--分页组件-->
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @current-change="getList"
                @size-change="getList"
            />
        </BasePage>
    </el-dialog>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { DecisionItemModel } from '@/models'

export default {
    name: 'UseDialog',
    components: {
        BasePage
    },
    data() {
        return {
            model: new DecisionItemModel(),
            visible: false,
            form: {
                decisionItemName: '',
                orgName: ''
            },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            // options: [],
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        width: '56'
                    }
                },
                {
                    slot: 'index',
                    attrs: {
                        type: 'index',
                        label: '序号',
                        width: '70'
                    }
                },
                {
                    attrs: {
                        prop: 'decisionItemName',
                        label: '决策项目名称',
                        'min-width': '150'
                    }
                },
                {
                    slot: 'roadName',
                    attrs: {
                        prop: 'roadName',
                        label: '路段名称',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'orgName',
                        label: '管养单位',
                        'show-overflow-tooltip': true,
                        'min-width': '130'
                    }
                }
            ]),
            id: ''
        }
    },
    methods: {
        // getDecisionList() {
        //     this.model
        //         .getList({}, {pageNo: 1, pageSize: 10000})
        //         .then((res) => {
        //             this.options = (res.list || []).map(item => {
        //                 return {
        //                     value: item.id,
        //                     label: item.decisionItemName
        //                 }
        //             })
        //         })
        // },
        getList() {
            console.log(this.id)
            this.listLoading = true
            this.model
                .getList({ ...this.form, performancePredictionModelId: this.id }, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        // 取消按钮
        cancel() {
            this.visible = false
            this.reset()
        },
        open(id) {
            this.id = id
            // this.getDecisionList()
            this.getList()
            this.visible = true
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                decisionItemName: '',
                orgName: ''
            }
        },
        resetConditions() {
            this.reset()
            this.handleFilter()
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
